<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form onsubmit="return form_validate()">
			<label for="email">Email:</label>
			<input id="email" name="email">
			<br>
			<label for="username">用户名:</label>
			<input id="uername" name="uername">
			<br>
			<label for="age">年龄:</label>
			<input id="age" name="age" type="number" value="18" min="16" max="30">
			<input type="submit">
		</form>
	</body>
	<script>
		// 自定义表单校验
 		function form_validate(){
			let email = document.getElementById("email");
			// xx@xx.com/cn
			let reg = /^[A-Za-z0-9_]+@[A-Za-z0-9]+\.(com|cn|gov.cn|org)$/;
			if(reg.test(email.value)){
				// return true; // 因为下面还要校验，不能退出
			} else {
				alert("格式错误");
				return false;
			}
			// 上面是对Email进行校验，下面是对用户名进行校验，表单中所有需要的元素都要实现校验规则
			let username = document.getElementById("username")
			reg = /^\w{4,8}$/; // \w表示大小写字母+数字+下划线
			if(reg.test(username.value)){
				// return true; // 无需处理
			} else {
				alert("用户名不正确：大小写字母+数字+下划线共4，8位");
				return false;
			}
		}
	</script>
</html>